<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 15:23:46
 * @LastEditTime: 2022-08-24 11:23:26
-->
<template>
  <div class="customer-msg">
    <div class="flex flex-horizontal-between">
      <p class="title">客户信息</p>
      <Button type="primary" @click="editCustomerFun" v-if="editCusFlag">编辑产证客户</Button>
    </div>

    <ul v-for="(item,index) in customerInfo" :key="index" class="flex flex-wrap">
      <li v-for="(itemInfo,indexInfo) in customerList" :key="indexInfo"
        class="flex flex-vertical-center">
        <p class="text-right name">{{itemInfo.name}}：</p>
        <p v-if="itemInfo.key!='address'">{{item[itemInfo.key]}}</p>
        <p v-else class="ell detail-text" :title="item[itemInfo.key]">{{item[itemInfo.key]}}
        </p>
      </li>
    </ul>
    <edit-customer ref="editCustomer" @onSearch="searchFun" :contractId="contractId">
    </edit-customer>
  </div>
</template>
<script>
  import editCustomer from './editCustomer.vue'
  export default {
    props: ['detailMsg', 'contractId'],
    data() {
      return {
        editCusFlag: false,
        customerList: [
        {
          name: '客户姓名',
          key: 'customerName',
        },
        {
          name: '客户手机号',
          key: 'customerPhone',
        },
        {
          name: '证件类型',
          key: 'credentialsTypeCN',
        },
        {
          name: '证件号',
          key: 'credentialsNumber',
        },
        {
          name: '联系地址',
          key: 'address',
        },
        {
          name: '邮政编码',
          key: 'postalCode',
        }, ],
        customerInfo: [],
        credentialsTypeList: [
        {
          name: '身份证',
          value: 1,
        },
        {
          name: '港澳台证',
          value: 2,
        },
        {
          name: '护照',
          value: 3,
        },
        {
          name: '其他',
          value: 4,
        }],
      }
    },
    components: {
      editCustomer
    },
    mounted() {
      this.customerInfo = this.detailMsg.orProduceDetailVOs
      let statusName = this.detailMsg.orContractBaseInfoVO.statusName
      //签约回款中、签约已全款、签约已交房
      this.editCusFlag = ['签约回款中', '签约已全款', '签约已交房'].indexOf(statusName) > -1 && this
        .unlocking('0104030319') ? true :
        false

      this.customerInfo.forEach((item) => {
        item.credentialsTypeCN =
          item.credentialsType != '-' ?
          this.credentialsTypeList.filter(
            (curItem) => curItem.value == item.credentialsType
          )[0].name :
          '-'
      })
    },
    methods: {
      editCustomerFun() {
        this.$refs.editCustomer.show(this.customerInfo)
      },
      searchFun() {
        this.$emit('onGetOrderDetail')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .customer-msg {
    margin-top: 40px;

    ul {
      li {
        width: 50%;
        line-height: 50px;

        .name {
          width: 150px;
        }

        .contract-cus {
          margin-left: 20px;
          padding: 0 10px;
          color: #0f42a7;
          border: 1px solid #0f42a7;
          font-size: 14px;
          height: 25px;
          line-height: 25px;
          border-radius: 5px;
        }

        .proper-cus {
          margin-left: 20px;
          padding: 0 10px;
          color: #70b603;
          border: 1px solid #70b603;
          font-size: 14px;
          height: 25px;
          line-height: 25px;
          border-radius: 5px;
        }

        .detail-text {
          width: calc(100% - 150px);
        }
      }
    }
  }
</style>